
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <title>发票详情</title>
    <!-- 引入Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .invoice-detail {
            max-width: 800px;
            margin: 30px auto;
        }
        .invoice-header {
            border-bottom: 2px solid #ddd;
            margin-bottom: 20px;
            padding-bottom: 15px;
        }
    </style>


</head>
<body>
<div class="container invoice-detail">
    <!-- 发票头信息 -->
    <div class="invoice-header">
        <h2 class="text-center">电子发票详情</h2>
        <h4 class="text-center">
            发票编号：${invoice.id}
            <small>开票时间：<fmt:formatDate value="${invoice.addTime}" pattern="yyyy-MM-dd HH:mm:ss"/></small>
        </h4>
    </div>

    <!-- 基本信息 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息</h3>
        </div>
        <div class="panel-body">
            <dl class="dl-horizontal">
                <dt>订单号：</dt>
                <dd>${no}</dd>

                <dt>发票抬头：</dt>
                <dd>${invoice.title}</dd>

                <dt>发票类型：</dt>
                <dd>
                    <c:choose>
                        <c:when test="${invoice.type == 1}">
                            个人发票
                            <span class="label label-primary">个人</span>
                        </c:when>
                        <c:when test="${invoice.type == 2}">
                            企业发票
                            <span class="label label-success">企业</span>
                        </c:when>
                    </c:choose>
                </dd>
            </dl>
        </div>
    </div>

    <!-- 企业发票信息 -->
    <c:if test="${invoice.type == 2}">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">企业信息</h3>
        </div>
        <div class="panel-body">
            <dl class="dl-horizontal">
                <dt>统一信用代码：</dt>
                <dd>${invoice.taxId}</dd>

                <dt>银行账户：</dt>
                <dd>${invoice.bankCard}</dd>
            </dl>
        </div>
    </div>
    </c:if>

    <!-- 商品信息 -->
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">商品明细</h3>
        </div>
        <div class="panel-body">
<%--            <c:choose>--%>
<%--                <c:when test="${not empty invoice.orderInfo}">--%>
<%--                    <pre>${invoice.orderInfo}</pre>--%>
<%--                    <!-- 若orderInfo是JSON字符串可做解析展示 -->--%>
<%--                </c:when>--%>
<%--                <c:otherwise>--%>
<%--                    <div class="alert alert-warning">暂无商品明细信息</div>--%>
<%--                </c:otherwise>--%>
<%--            </c:choose>--%>
          <span>${invoice.orderInfo}</span>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="text-center">
        <a href="${pageContext.request.contextPath}/order/" class="btn btn-default">
            <span class="glyphicon glyphicon-list"></span> 返回列表
        </a>
        <button class="btn btn-primary" onclick="window.print()">
            <span class="glyphicon glyphicon-print"></span> 打印发票
        </button>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>